<template>
  <div class="cat">
    <div>
      <el-input v-model="str" placeholder="根据分类名称查询" style="width: 400px; position: absolute; left: 200px;"></el-input>
      <el-button @click="so" style="position: absolute;left: 650px;">查询</el-button>
      <el-button @click="addCat"style="position: absolute;left: 720px;">新增</el-button>
      <el-button @click="deleteCat" style="position: absolute;left: 800px;">删除</el-button>
      <el-button @click="reload" style="position: absolute;left: 880px;">刷新</el-button>
    </div>
    <div class="table1">
      <el-table :data="productCatInfo" border :row-class-name="tableRowClassName" ref="multipleTable" @selection-change="handleSelectionChange" >
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="catName" label="大类名称" width="140">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="catDesc" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="isShow" label="是否显示" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateCat(scope.row.catCode)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="productCatPageInfo.current" :page-sizes="[1,2,3]" :page-size="productCatPageInfo.size"
        layout="total, sizes, prev, pager, next, jumper" :total="productCatPageInfo.total">
      </el-pagination>
    </div>


    <el-dialog title="商品大类新增" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">

      <el-form :model="productCatForm" :rules="rules" ref="productCatForm" label-width="100px">
        <el-form-item label="分类名称" prop="catName" style="width: 350px;">
          <el-input v-model="productCatForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="catDesc" style="width: 350px;">
          <el-input v-model="productCatForm.catDesc"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit" style="width: 350px;">
          <el-input v-model="productCatForm.unit"></el-input>
        </el-form-item>
        <el-form-item v-for="(domain, index) in productCatForm.evalPicDef1" :label="'鉴定图定义' + index" :key="domain.key"
          :prop="'evalPicDef1.' + index + '.pictype'"
              :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
              }">
          <el-input v-model="domain.pictype" style="position: absolute;width: 200px;left: 0;"></el-input>
          <!-- 下拉框 -->
          <el-select v-model="domain.flat" placeholder="请选择">
              <el-option
                v-for="dom in options"
                :key="dom.value"
                :label="dom.label"
                :value="dom.value">
              </el-option>
            </el-select>
          <el-button @click.prevent="removeDomain(domain)" style="position: absolute;left: 420px;" :disabled="index in [0,1]">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('productCatForm')">提交</el-button>
          <el-button @click="addDomain">新增选项</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="qx1">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog title="商品大类修改" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

      <el-form :model="uproductCatForm" :rules="rules" ref="uproductCatForm" label-width="100px">
        <el-form-item label="分类名称" prop="catName" style="width: 350px;">
          <el-input v-model="uproductCatForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="catDesc" style="width: 350px;">
          <el-input v-model="uproductCatForm.catDesc"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit" style="width: 350px;">
          <el-input v-model="uproductCatForm.unit"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow" style="width: 350px;">
          <el-input v-model="uproductCatForm.isShow"></el-input>
        </el-form-item>
        <el-form-item v-for="(domain, index) in uproductCatForm.evalPicDef1" :label="'鉴定图定义' + index" :key="domain.key"
          :prop="'evalPicDef1.' + index + '.pictype'"
              :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
              }">
          <el-input v-model="domain.pictype" style="position: absolute;width: 200px;left: 0;"></el-input>
          <!-- 下拉框 -->
          <el-select v-model="domain.flat" placeholder="请选择">
              <el-option
                v-for="dom in options"
                :key="dom.value"
                :label="dom.label"
                :value="dom.value">
              </el-option>
            </el-select>
          <el-button @click.prevent="removeDomain2(domain)" style="position: absolute;left: 420px;" :disabled="index in [0,1]">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2('uproductCatForm')">提交</el-button>
          <el-button @click="addDomain2">新增选项</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "categoriesd",
    data() {
      return {
        productCatPageInfo: {},
        productCatInfo: [],
        str: "",
        ischecked: [],
        dialogVisible1:false,
        dialogVisible:false,
        options:[{
          value: '0',
          label: '可选'
        }, {
          value: '1',
          label: '必选'
        }],

        uproductCatForm:{
          catCode:"",
          catName:"",
          catDesc:"",
          unit:"",
          isShow:"",
          //json字符串
          evalPicDef:"",
          evalPicDef1:[
            //鉴定图定义
            {
              pictype: "正面",
              flat:''
            },
            {
              pictype: "背面",
              flat:''
            }
          ],
        },
        productCatForm:{
          catName:"",
          catDesc:"",
          unit:"",
          //json字符串
          evalPicDef:"",
          evalPicDef1:[
          //鉴定图定义
          {
            pictype: "正面",
            flat:'1'
          },
          {
            pictype: "背面",
            flat:'1'
          }
        ],
        },
        rules: {
          catName: [{
              required: true,
              message: '请输入分类名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 2 到 5 个字符',
              trigger: 'blur'
            }
          ],
          catDesc:[{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
          unit:[{
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }],
          isShow:[{
            required: true,
            message: '是否展示',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      //修改
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            let s = JSON.stringify(this.uproductCatForm.evalPicDef1);
            this.uproductCatForm.evalPicDef=s;
            this.$http.post("pawnProductCat/updateProductCat",this.uproductCatForm).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      updateCat(catCode){
        this.uproductCatForm.catCode = catCode;
        this.$http.get("pawnProductCat/getProductCatByCatCode",{params: {
            catCode:catCode
          }}).then(resp=>{
            this.uproductCatForm.catName = resp.data.data.catName;
            this.uproductCatForm.catDesc = resp.data.data.catDesc;
            this.uproductCatForm.unit = resp.data.data.unit;
            this.uproductCatForm.isShow = resp.data.data.isShow;
            this.uproductCatForm.evalPicDef1=JSON.parse(resp.data.data.evalPicDef);
          })
        this.dialogVisible=true;
      },
      addDomain2() {
        this.uproductCatForm.evalPicDef1.push({
          pictype: "",
          flat:'1'
        });
      },
      removeDomain2(item) {
        var index = this.uproductCatForm.evalPicDef1.indexOf(item)
        if (index !== -1) {
          this.uproductCatForm.evalPicDef1.splice(index, 1)
        }
      },
      addDomain() {
        this.productCatForm.evalPicDef1.push({
          pictype: "",
          flat:'1'
        });
      },
      removeDomain(item) {
        var index = this.productCatForm.evalPicDef1.indexOf(item)
        if (index !== -1) {
          this.productCatForm.evalPicDef1.splice(index, 1)
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            let s = JSON.stringify(this.productCatForm.evalPicDef1);
            this.productCatForm.evalPicDef=s;
            this.$http.post("pawnProductCat/saveProductCat",this.productCatForm).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      addCat(){
        this.dialogVisible1 = true;
      },
      handleClose(done) {
        location.reload();
      },
      qx(){
        this.dialogVisible = false;
        location.reload();
      },
      qx1() {
        this.dialogVisible1 = false;
        location.reload();
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.isShow === '否') {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      },
      so(){
        this.getByStr(1,3);
      },
      getByStr(currentPage, pagesize){
        this.$http.get("pawnProductCat/getProductCatByLike",{
          params: {
            current: currentPage,
            size: pagesize,
            str:this.str
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.productCatInfo = resp.data.data.records;
            this.productCatPageInfo = resp.data.data;
          }else{
            alert(resp.data.message);
            location.reload();
          }
        })
      },
      deleteCat() {
        this.$http.post("pawnProductCat/deleteProductCat",{isChecked:this.ischecked}).then(resp=>{
          alert(resp.data.message);
          location.reload();
        })
      },
      /**
       * 选中
       */
      handleSelectionChange(checked) {
        this.ischecked = checked
      },
      reload() {
        location.reload();
      },
      handleCurrentChange(current) {
        if(this.str==""){
          this.getAllCategories(current, this.productCatPageInfo.size);
        }else{
          this.getByStr(current, this.productCatPageInfo.size);
        }
      },
      handleSizeChange(size) {
        if(this.str==""){
          this.getAllCategories(this.productCatPageInfo.current, size);
        }else{
          this.getByStr(this.productCatPageInfo.current, size);
        }
      },
      getAllCategories(currentPage, pagesize) {
        this.$http.get("pawnProductCat/getAllProductCat", {
          params: {
            current: currentPage,
            size: pagesize
          }
        }).then(resp => {
          this.productCatInfo = resp.data.data.records;
          this.productCatPageInfo = resp.data.data;
        })
      }
    },
    created() {
      this.getAllCategories(1, 2);
    }
  }
</script>

<style>
  .table1 {
    position: absolute;
    top: 100px;
    left: 150px;
  }
  .el-table .warning-row {
    background: yellow;
  }
  .block {
    position: absolute;
    top: 350px;
    left: 300px;
  }
  .cat{
    text-align: center;
  }
</style>
